<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
            <!-- 警告 -->
            <el-alert :closable='false' show-icon title="注意：只允许为第三级分类设置相关参数！"  type="warning"></el-alert>
            <!-- 选择商品分类区域 -->
            <el-row>
                <el-col>
                    <span>商品分类：</span>
                    <!-- 三级联动区域-->
                    <el-cascader
                    v-model="cascaderValue"
                    :options="paramsGoodsData"
                    :props="cascaderProps"
                    @change="cascaderChange"></el-cascader>
                </el-col>
            </el-row>
            <!-- Tabs标签页区域-->
            <el-tabs v-model="activeName" @tab-click="handleTagsClick">
                <el-tab-pane label="动态参数" name="many">
                    <el-button type="primary" size="small" :disabled="cascaderValue.length === 3? false: true">添加参数</el-button>
                    <!-- 动态参数表格-->
                    <el-table :data="manyTableData" style="width: 100%">
                        <el-table-column  type="expand"  ></el-table-column>
                        <el-table-column  type="index" label="#" ></el-table-column>
                        <el-table-column  prop="attr_name" label="参数名称" ></el-table-column>
                        <el-table-column   label="操作" >
                            <el-button type="primary" size="small">修改</el-button>
                            <el-button type="danger" size="small">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                    <el-button type="primary" size="small" :disabled="cascaderValue.length === 3? false: true">添加参数</el-button>
                     <!-- 静态参数表格-->
                    <el-table :data="onlyTabelData" style="width: 100%" border>
                        <el-table-column  type="expand" width="80" ></el-table-column>
                        <el-table-column  type="index" label="#" width="180" ></el-table-column>
                        <el-table-column  prop="attr_name" label="参数名称"  width="180"></el-table-column>
                        <el-table-column   label="操作"  width="180">
                            <el-button type="primary" size="small">修改</el-button>
                            <el-button type="danger" size="small">删除</el-button>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script type="text/ecmascript-6">
    import {requestGoodsCate, requestGoodsList} from '@/network/goods.js'
    export default {
        data() {
            return {
                paramsGoodsData:[],
                cascaderValue:[],
                cascaderProps:{
                    expandTrigger: 'hover',
                    value: 'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                activeName:'many',
                //存放的是动态参数的数据
                manyTableData:[],
                //存放的是静态属性的数据
                onlyTabelData: []
                
            }
        },
        created(){
            this.getGoodsListData()
        },
        methods: {
            async getGoodsListData(){
                const {data} = await requestGoodsCate()
                this.paramsGoodsData = data.data
            },
            //级联数据改变时，获取 v-model 绑定的值
            cascaderChange(){
               
                this.getListData()
                
            },
            //点击tags时触发的事件函数
            handleTagsClick(){
                if(this.cascaderValue.length === 3 ){
                    this.getListData()
                }
                
            },
            //获取参数列表函数
            async getListData(){
                const {data} = await requestGoodsList({url:`categories/${this.cateId}/attributes`,params:{sel:this.activeName}})
                if(data.meta.status !== 200) return this.$message.error('参数列表数据获取失败')
                console.log(data);
                
                if(this.activeName === 'many'){
                    this.manyTableData = data.data
                    console.log(this.manyTableData);
                }else{
                    this.onlyTabelData = data.data
                }
            }
        },
        computed:{
            cateId(){
                if(this.cascaderValue.length === 3){
                    return this.cascaderValue[2]
                }else{
                    return null
                }
            }
        }
    }
</script>

<style lang='less' scoped>
    .el-alert{
        margin-bottom: 10px;
    }
</style>
